<template>
  <div class="wrap">
    <div class="topper">
      <i class="back iconfont iconnew iconjiantou2" @click="handleBack"></i>
      <div class="box">
        <i class="iconfont iconsearch"></i>
        <input type="search" class="search" v-model="inputValue" />
      </div>
      <span class="searchText" @click="searchText">搜索</span>
    </div>
    <!-- 文章渲染 -->
      <div v-if="postList.length>0">
           <div  v-for="item in postList" :key="item.id">
          <SingleDom 
          v-if="item.type ==1 && item.cover.length>=1 && item.cover.length<3"
           :postData="item" :comment=item.comment_length
           @clicked="$router.push('/post?id='+item.id)"
        />
          <MoreDom
          v-if="item.type ==1 && item.cover.length>=3"
           :postData="item" :comment=item.comment_length
           @clicked="$router.push('/post?id='+item.id)"
          />
          <VideoDom
          v-if="item.type ==2"
           :postData="item" :comment=item.comment_length
            @clicked="$router.push('/post?id='+item.id)"
          />
       </div>
      </div>
      
      <!-- 搜索 -->
      <div v-else>
         <div v-if="commentList.length>0">
        <!-- 推荐 -->
      <div class="recommend">
          <div class="items" v-for="item in commentList" :key="item.id" @click="handleSearch(item.title)"><span>{{item.title}}</span><a href="javascript:;" class="iconfont iconnew iconjiantou1"></a></div>
          <!-- <div class="items"><span>花露水的妙用</span><a href="javascript:;" class=""></a></div>
          <div class="items"><span>花露水的妙用</span><a href="javascript:;" class=""></a></div>
          <div class="items"><span>花露水的妙用</span><a href="javascript:;" class=""></a></div>
          <div class="items"><span>花露水的妙用</span><a href="javascript:;" class=""></a></div> -->
      </div>
    </div>

     <div v-else>
            <!-- 历史记录 -->
     <div class="hostory" v-if="historyValue.length>0">
      <h4 class="head">历史记录</h4>
      <div class="info">
        <div class="items" v-for="(item,index) in historyValue" :key="item.id" @click="historySearch(item)"><span>{{item}}</span><i class="remove iconfont iconicon-test" @click.prevent.stop="removeHistory(index)"></i></div>
      </div>
    </div>

    <!-- 热门搜索 -->
    <div class="hots">
      <h4 class="head">热门搜索</h4>
      <div class="info">
        <div class="items" ref="div" @click="handleHots">办公室小野否认解散</div>
        <div class="items" ref="div" @click="handleHots">办公室小野否认解散</div>
        <div class="items" ref="div" @click="handleHots">办公室小野否认解散</div>
        <div class="items" ref="div" @click="handleHots">办公室小野否认解散</div>
        <div class="items" ref="div" @click="handleHots">办公室小野否认解散</div>
        <div class="items" ref="div" @click="handleHots">办公室小野否认解散</div>
      </div>
    </div>
   
     </div>
      </div>

      
  </div>
</template>

<script>
import SingleDom from '@/components/SingleDom'

import MoreDom from '@/components/MoreDom'

import VideoDom from '@/components/VideoDom'

export default {
    components:{
       SingleDom,
       MoreDom,
       VideoDom
    },

    data(){
        return {
            historyValue:[],
            postList:[],
            commentList:[],
            inputValue:''
        }
    },
    created(){
      if(localStorage.getItem('history')){
        this.historyValue = JSON.parse(localStorage.getItem('history'))
      }
    },

    methods:{
        // 搜索功能 
        searchText(){
          //  搜索文章
          //  接口类型:【GET】
          //  接口地址: /post_search
          //  参数 : keyword

            this.$axios({
              method:'get',
              url: '/post_search',
              params:{ 
                 keyword:this.inputValue
              }
            })
            .then(res=>{
              console.log(res);
              this.postList = [
                ...res.data.data
              ]

            // 搜索之后将内容存入历史数组中
              if(this.historyValue.indexOf(this.inputValue)==-1){
                    this.historyValue = [
                     ...this.historyValue,
                     this.inputValue
                   ]
                   localStorage.setItem('history',JSON.stringify(this.historyValue))
              }

            })
        },

        // 历史记录的搜索
        historySearch(value){
            this.inputValue = value;
            this.searchText();
        },

        // 给推荐添加点击搜索事件
        handleSearch(value){
           this.inputValue = value;
           this.searchText();
        },

        // 删除历史记录事件
        removeHistory(index){
          // console.log('点击了');
          // console.log(index);
          // console.log(JSON.parse(localStorage.getItem('history')));
          let arr = JSON.parse(localStorage.getItem('history'))
                arr.splice(index,1)
             this.historyValue = [...arr];
            localStorage.setItem('history',JSON.stringify(arr))
           
        },

        // 热门搜索
        handleHots(){
          // console.log(this.$refs.div.innerHTML);
           this.inputValue = this.$refs.div.innerHTML;
           this.searchText();
        },

        // 返回按钮
        handleBack(){
           if(this.inputValue==''){
              this.$router.back()
           }else{
              this.inputValue=''
           }
        }
    },

    watch:{
      // 监测inputValue
        inputValue(){
            // 搜索推荐
            // 接口类型:【GET】
            // 接口地址: /post_search_recommend
            // 参数 : keyword
            if(this.inputValue == ''){
              this.commentList = [];
              this.postList=[];
              return
            }

            this.$axios({
                method:'get',
                url:'/post_search_recommend',
                params:{
                   keyword: this.inputValue
                }
                
            })
            .then(res=>{
              // console.log(res);
              // 将文章推荐返回的内容存入数组中
                this.commentList = [
                   ...res.data.data
                   ]
               
            })
        },

      
    }

};
</script>

<style lang="less" scoped>
.wrap {
  padding: 0 10/360 * 100vw;
  .topper {
    width: 100%;
    height: 50/360 * 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .box {
      padding-left: 10/360 * 100vw;
      margin: 10/360 * 100vw 10/360 * 100vw;
      flex: 1;
      align-items: center;
      height: 30/360 * 100vw;
      display: flex;
      color: #afafaf;
      border: 1/360 * 100vw solid #afafaf;
      border-radius: 15/360 * 100vw;
      .search {
        padding-left: 5/360 * 100vw;
        width: 90%;
        height: 100%;
        outline: none;
        border: transparent;
        border-radius: 15/360*100vw;
        font-size: 12/360*100vw;
      }
    }

    .searchText {
      font-size: 14/360 * 100vw;
    }
  }

  // 历史记录
  .hostory {
    margin-top: 10/360 * 100vw;
    font-size: 14/360 * 100vw;
    border-bottom: 1/360 * 100vw solid #cac8c8;
    .info {
      display: flex;
      .items {
        position: relative;
        padding: 5/360*100vw 10/360*100vw;
        margin: 15/360 * 100vw 15/360*100vw;
        font-size: 12/360 * 100vw;
        border: 1/360*100vw solid #dddcdc;
           .remove {
             position: absolute;
             top: -8/360*100vw;
             right: -2/360*100vw;
             font-size: 8/360*100vw;
           }
      }
    }
  }

  // 热门搜索
  .hots {
    margin-top: 20/360 * 100vw;
    font-size: 14/360 * 100vw;
    .info {
      display: flex;
      flex-wrap: wrap;
      .items {
          width: 160/360*100vw;
          margin: 15/360 * 100vw 0;
          font-size: 12/360 * 100vw;
      }
    }
  }

  // 更多推荐 
  .recommend {
      margin-top: 10/360*100vw;
      font-size: 14/360*100vw;
      .items {
          display: flex;
          justify-content: space-between;
          border-bottom: 1/360*100vw solid #dad8d8;
          padding: 10/360*100vw 0;
          font-size: 12/360*100vw;
      }
  }
}
</style>